<template>
  <div class="app-container">
    <div class="Acolumn1">
      <div class="Bline-1">
        <el-tag type="success" class="Ctxt1">设备列表</el-tag>
      </div>
      <div class="Bline1">
        <el-descriptions
          direction="vertical"
          :column="4"
          style="width: 100%"
          border
        >
          <el-descriptions-item
            label="设备"
            label-align="center"
            align="center"
          >
            121
          </el-descriptions-item>
          <el-descriptions-item
            label="报警"
            label-align="center"
            align="center"
          >
            0
          </el-descriptions-item>
          <el-descriptions-item
            label="在线"
            label-align="center"
            align="center"
          >
            121
          </el-descriptions-item>
          <el-descriptions-item
            label="离线"
            label-align="center"
            align="center"
          >
            0
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="Bline2">
        <el-input
          v-model="searchName"
          placeholder="请输入名称"
          clearable
          prefix-icon="Search"
          style="margin-top: 2vh"
        />
      </div>
      <div class="Bline3">
        <el-tree
          :data="treeOptions"
          :props="{ label: 'label', children: 'children' }"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="treeRef"
          node-key="id"
          highlight-current
          default-expand-all
          @node-click="handleNodeClick"
        >
        </el-tree>
      </div>
    </div>
    <div class="Acolumn2">
      <div class="Bline-1">
        <el-tag type="success" class="Ctxt1">实时数据</el-tag>
      </div>
      <div class="Bline1">
        <el-tabs v-model="tabsListID" @tab-click="tabsToGetList" type="card">
          <el-tab-pane
            v-for="item in tabsList"
            :key="item.id"
            :label="item.name"
            :name="item.id"
          >
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="Bline2">
        <div class="Cchart1">
          <div
            ref="lineChartRefXXXXX"
            style="width: 110%; height: 130%; transform: translate(-5%, -10%)"
          ></div>
        </div>
      </div>
      <div class="Bline3">
        <div class="Cline1">
          <el-tag type="success" class="Dtxt1">历史数据</el-tag>
          <div class="Dcolumn2">
            <el-date-picker
              v-model="searchDate"
              type="daterange"
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              @change="changeTime"
            />
          </div>
        </div>
        <div class="Cline2"></div>
        <div class="Cline3">
          <el-table v-loading="loading" :data="arrayElectricityTable" height="350">
            <el-table-column label="时间" align="center" prop="time" />
            <el-table-column label="A相电压" align="center" prop="AVoltage" />
            <el-table-column label="正向有功电能" align="center" prop="power" />
            <el-table-column label="B相电压" align="center" prop="BVoltage" />
            <el-table-column label="C相电压" align="center" prop="CVoltage" />
            <el-table-column label="A相电流" align="center" prop="Acurrent" />
            <el-table-column label="B相电流" align="center" prop="Bcurrent" />
            <el-table-column label="C相电流" align="center" prop="Ccurrent" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.app-container {
  display: flex;
  .Acolumn1 {
    border: 1px solid;
    width: 20%;
    height: 85vh;
    display: grid;
    .Bline-1 {
      height: 5vh;
      .Ctxt1 {
        margin-top: 10px;
        margin-left: 10px;
        font-weight: 400;
        font-size: 14px;
      }
    }
    .Bline1 {
      height: 9vh;
      display: flex;
    }
    .Bline2 {
      height: 7vh;
    }
    .Bline3 {
      overflow: scroll;
      height: 63vh;
    }
  }
  .Acolumn2 {
    width: 80%;
    .Bline-1 {
      height: 5vh;
      .Ctxt1 {
        margin-left: 10px;
        font-weight: 400;
        font-size: 14px;
      }
    }
    .Bline1 {
      display: flex;
      height: 5vh;
    }
    .Bline2 {
      height: 25vh;
      .Cchart1 {
        height: 25vh;
      }
    }
    .Bline3 {
      .Cline1 {
        height: 5vh;
        display: flex;
        .Dtxt1 {
          margin-top: 10px;
          margin-left: 10px;
          font-weight: 400;
          font-size: 14px;
        }
        .Dcolumn2 {
          margin-top: 10px;
          margin-left: 30px;
          width: 50px;
        }
      }
      .Cline2 {
      }
      .Cline3 {
      }
    }
  }
}
</style>
<script setup>



const searchDate = ref(null);
function changeTime(date){
  console.log(date)
}

/** 根据名称筛选部门树 */
const searchName = ref("");
import { watch } from "vue";
watch(searchName, (val) => {
  proxy.$refs["treeRef"].filter(val);
});
/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};

onMounted(() => {
  for (let i = 0; i < 50; i++) {
    let item1 = {
      id: i,
      label: "电表 1-" + i,
    };
    treeOptions.value.push(item1);
  }
  proxy.$refs["treeRef"].setCurrentKey(treeOptions.value[0].id);
});
const treeOptions = ref([]);
function handleNodeClick(data) {
  console.log(data);
}

const tabsList = ref([
  { id: 0, name: "A相电压" },
  { id: 1, name: "正向有功电能" },
  { id: 2, name: "B相电压" },
  { id: 3, name: "C相电压" },
  { id: 4, name: "A相电流" },
  { id: 5, name: "B相电流" },
  { id: 6, name: "C相电流" },
]);
const tabsListID = ref(0);
function tabsToGetList(pane) {
  let id = pane.props.name;
  let item = {};
  tabsList.value.forEach((item1) => {
    if (item1.id == id) {
      item = item1;
    }
  });
  console.log(item);
}

import { onUnmounted, onMounted } from "vue";

onMounted(() => {
  getCharData();
});
onUnmounted(() => {
  if (timeLoop.value) {
    clearInterval(timeLoop.value);
    timeLoop.value = null;
  }
});
const timeLoop = ref({});
const arrayElectricity = ref([]);
const arrayElectricityTable = ref([]);
// 后续数据处理
function getCharData() {
  let oneDay = 1 * 1000;
  // let oneDay = 24 * 3600 * 1000;
  let now = new Date();
  let value = Math.random() * 1000;
  function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
      name: now.toString(),
      value: [now, Math.round(value)],
      time: renderTime(now),
      AVoltage: Math.round(value),
      BVoltage: Math.round(value),
      CVoltage: Math.round(value),
      Acurrent: Math.round(value),
      Bcurrent: Math.round(value),
      Ccurrent: Math.round(value),
      power: Math.round(value),
    };
  }

  for (var i = 0; i < 50; i++) {
    arrayElectricity.value.push(randomData());
    arrayElectricityTable.value.unshift(randomData());
  }
  createlineChart1(arrayElectricity.value);
  timeLoop.value = setInterval(function () {
    for (var i = 0; i < 5; i++) {
      arrayElectricity.value.shift();
      arrayElectricity.value.push(randomData());
      arrayElectricityTable.value.unshift(randomData());
    }
    createlineChart1(arrayElectricity.value);
  }, 5000);
}

import * as echarts from "echarts";
const lineChartRefXXXXX = ref(null);
function createlineChart1(yData) {
  const chart1 = echarts.init(lineChartRefXXXXX.value);
  // 在 DOM 挂载后初始化 ECharts
  // 设置图表的配置项和数据
  const option = {
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        params = params[0];
        var date = new Date(params.name);
        return renderTime(date) + " / " + params.value[1];
      },
      axisPointer: {
        animation: false,
      },
    },
    xAxis: {
      type: "time",
      splitLine: {
        show: false,
      },
      interval: 3600,
      axisLabel: {
        // formatter: function (value, index) {
        //   var date = new Date(value);
        //   return (
        //     date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
        //   );
        // },
        formatter: function (value, index) {
          var date = new Date(value);
          return renderTime(date);
        },
      },
    },

    yAxis: {
      name: "单位（V）",
      nameTextStyle: {
        color: "#aaa",
        nameLocation: "start",
      },
      type: "value",
      boundaryGap: [0, "100%"],
      splitLine: {
        show: true,
      },
    },
    series: [
      {
        name: "Fake Data",
        type: "line",
        showSymbol: false,
        data: yData,
      },
    ],
  };
  chart1.setOption(option);
}
//--------------当日转换为YYYY-MM-DD HH:MM:ss格式------------
function renderTime(date) {
  var h =
    (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
  var m =
    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
    ":";
  var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return h + m + s;
}
const { proxy } = getCurrentInstance();
const loading = ref(true);

onMounted(() => {
  getList();
});
/** 查询子系统管理列表 */
const XXXXXList = ref([]);
function getList() {
  loading.value = true;
  XXXXXList.value = [
    { id: 0, name: "A相电压" },
    { id: 1, name: "正向有功电能" },
    { id: 2, name: "B相电压" },
    { id: 3, name: "C相电压" },
    { id: 4, name: "A相电流" },
    { id: 5, name: "B相电流" },
    { id: 6, name: "C相电流" },
  ];
  loading.value = false;
  // listXXXXX(queryParams.value).then((response) => {
  //   YYYYYList.value = response.rows;
  //   total.value = response.total;
  //   loading.value = false;
  // });
}
</script>
